<template>
  <div class="mail-login">
    <nav-bar>
      <div slot="left">
        <img src="../../../assets/img/common/back.svg" alt=""
        @click="back">
      </div>
      <div slot="center">
        <p>邮箱登录</p>
      </div>
    </nav-bar>
    <div class="content">
      <p>请输入邮箱：</p>
      <div class="input_top">
        <input type="text" name="input_mail" placeholder="请输入163邮箱"
               v-on:input="get_mail">
      </div>
      <p>请输入密码：</p>
      <div class="input_bottom">
        <input type="password" name="input_mail_password" placeholder="请输入密码"
               v-on:input="get_password">
      </div>
      <div class="trulylogin">
        <button @click="trulylogin">登录</button>
      </div>


    </div>
  </div>
</template>

<script>
  import {emaillogin} from "../../../network/login";
  import NavBar from "../../common/navbar/NavBar";
    export default {
        name: "MailLogin",
        components:{
            NavBar,
        },
        data(){
          return{
              get_email:'',
              get_pwd:'',
          }
        },
        methods:{
            back(){
                this.$router.back();
            },
            get_mail(){
                let input = document.getElementsByName('input_mail')
                this.get_email = input[0].value
            },
            get_password(){
                let input = document.getElementsByName('input_mail_password')
                this.get_pwd = input[0].value
            },
            trulylogin(){
                if(this.get_email != "") {
                    let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                    var istrue= reg.test(this.get_email);
                    if(!istrue) {
                        this.$toast.show('邮箱格式不正确，请重新输入！')
                        return false;
                    }else{
                        var account={
                            email:this.get_email,
                            password:this.get_pwd,
                        }
                        emaillogin(account).then(res=>{
                            console.log(res)
                            alert('此接口存在问题，尚未修复')
                        })
                    }
                    return false
                }else if(this.get_email == ""){
                    console.log('---');
                    this.$toast.show('请输入136邮箱！')
                }

            },

        }
    }
</script>

<style scoped>
  .mail-login{
    width: 100%;
  }

  .content{
    width: 100%;
    margin-top: 30px;
  }

  .content p{
    margin-left: 5%;
    margin-top: 20px;
    font-weight: 500;
    color: black;
  }

  .input_top{
    width: 90%;
    margin: 0 auto;
    margin-top: 15px;
  }

  .input_top input{
    outline: none;
    width: 100%;
    border: none;
    border-bottom: 2px solid darkgray;
  }

  .input_bottom{
    width: 90%;
    margin: 0 auto;
    margin-top: 15px;
  }

  .input_bottom input{
    outline: none;
    width: 100%;
    border: none;
    border-bottom: 2px solid darkgray;
  }

  .trulylogin{
    text-align: center;
    margin-top: 20px;
  }

  .trulylogin button{
    width: 95%;
    color: white;
    background-color: #FF3A3A;
    border: none;
    line-height: 30px;
    border-radius: 20px;
    font-size: 13px;
  }

  input:focus{
    border-bottom: 3px solid #DB2C1F;
  }

  ::-webkit-input-placeholder{
    font-size: 12px;
  }
</style>